  <template>
  <div>
    <el-card>
      <!--    面包屑-->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/cscindex' }">客户服务中心</el-breadcrumb-item>
        <el-breadcrumb-item>操作员管理</el-breadcrumb-item>
        <el-breadcrumb-item>操作员详情</el-breadcrumb-item>
      </el-breadcrumb>
      <br />
      <!--      搜索区-->
      <el-select v-model="selectedvalue" placeholder="请选择" size="mini" style="float:left">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.lable"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-row style="float:left;margin-left:5px;">
        <el-col :span="17">
          <el-input placeholder="请输入需要查询信息" v-model="input" clearable @clear="getList" size="mini"></el-input>
        </el-col>
        <el-col :span="3" style="margin-left: 5px">
          <el-button type="primary" @click="selected" size="mini">搜索</el-button>
        </el-col>
      </el-row>
      <br />
      <br />
      <!-- 操作员信息 -->
      <el-alert title="操作员" type="info" :closable="false" center>
        <span style="margin-left:0px">{{username}}</span>
      </el-alert>
      <!--    表格-->
      <el-table
        :data="tableData.slice((pageInfo.curPage-1)*pageInfo.pagesize,pageInfo.curPage*pageInfo.pagesize)"
        border
        style="width: 100%"
      >
        <el-table-column fixed prop="id" label="订单号"></el-table-column>
        <el-table-column prop="operatingTime" label="操作时间"></el-table-column>
        <el-table-column prop="orderStatus" label="操作类型">
          <template slot-scope="scope">
            <span v-if="scope.row.orderStatus===0">添加订单</span>
            <span v-if="scope.row.orderStatus===1">撤销订单</span>
            <span v-if="scope.row.orderStatus===2">换货订单</span>
            <span v-if="scope.row.orderStatus===3">退货订单</span>
          </template>
        </el-table-column>
        <el-table-column prop="orderType" label="订单类型">
          <template slot-scope="scope">
            <span v-if="scope.row.orderType===1">缺货</span>
            <span v-if="scope.row.orderType===2">调度中</span>
            <span v-if="scope.row.orderType===3">已领货</span>
            <span v-if="scope.row.orderType===3">配送完成</span>
            <span v-if="scope.row.orderType===0">可分配</span>
            <span v-if="scope.row.orderType===5">已退货</span>
          </template>
        </el-table-column>
      </el-table>
      <!--    分页-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageInfo.curPage"
        :page-sizes="[5, 10, 20, 30]"
        :page-size="pageInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
      ></el-pagination>
    </el-card>
  </div>
</template>
<script>
export default {
  name:'managerview',
  data() {
    return {
      tableData: [],
      //分页
      pageInfo: {
        query: "",
        curPage: 1,
        pagesize: 5,
      },
      total: 0,
      options: [
        {
          value: "0",
          lable: "订单ID",
        },
        {
          lable: "操作类型",
          value: "1",
        },
      ],
      selectedvalue: "",
      input: "",
      userid: sessionStorage.getItem("managerid"),
      username: sessionStorage.getItem("managername"),
    };
  },
  methods: {
    async getList() {
      const id = this.userid;
      console.log(id);
      const { data: res } = await this.$http
        .get(`/api/operator/query_sysUser_detail_info/${id}`)
        .catch((err) => {
          this.$message.error("服务器异常或权限不够！");
          console.log(err.msg);
        });
      if (res.code !== 200) {
        this.$message.error("查询失败！");
      } else {
        // this.d$$message.success('查询成功！')
        this.tableData = res.data;
        console.log(this.tableData);
        this.total = res.data.length;
        this.$forceUpdate;
      }
    },
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageInfo.pagesize = val;
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageInfo.curPage = val;
    },
    //搜索
    selected() {
      if (this.selectedvalue === "") {
        return this.$message.error("请选择关键词");
      } else if (this.selectedvalue !== "" && this.input !== "") {
        this.selectbyidorstatus();
      }
      if (this.input === "") {
        this.getList();
      }
    },
    //提交搜索信息
    async selectbyidorstatus() {
      var isselect = 1;
      var queryContain = this.input;
      if (this.selectedvalue === "0") {
        this.selectedvalue = "订单ID";
      } else {
        this.selectedvalue = "操作类型";
        if (this.input === "添加") {
          queryContain = 0;
        } else if (this.input === "撤销") {
          queryContain = 1;
        } else if (this.input === "换货") {
          queryContain = 2;
        } else if (this.input === "退货") {
          queryContain = 3;
        } else {
          this.$message.error("无该订单类型！");
          isselect = 0;
        }
      }
      const id = this.userid;
      const { data: res } = await this.$http
        .post(`/api/operator/query_sysUser_according_require/${id}`, {
          queryContain: queryContain,
          queryType: this.selectedvalue,
        })
        .catch((err) => {
          this.$message.error("服务器异常或权限不够！");
          console.log(err.msg);
        });
      if (res.code !== 200 || isselect === 0) {
        this.$message.error("查询失败！");
      } else {
        this.$message.success("查询成功!");
        this.tableData = [];
        this.tableData = res.data;
        this.$forceUpdate;
      }
    },
  },
  created() {
    this.getList();
  },
};
</script>

